<style lang="less">
    @import '../../../styles/common.less';
    @import '../../my-components/data-table/table.less';
</style>

<template>
  <div>
      <Row>
        <Col span="24">
            <Card>
                <p slot="title">
                    <!-- <Icon type="android-more-horizontal"></Icon> -->
                    管理员列表
                </p>
                <Row>
                    <Col span="16">
                        <Input v-model="searchData.username" @on-keyup.enter="handleSearch" placeholder="请输入用户名搜搜..." style="width: 150px" />
                        <Button type="primary" shape="circle" icon="ios-search" @click="handleSearch"></Button>
                    </Col>
                    <Col span="3" offset="5" v-if="$hasPerms('user:save')">
                        <span style="margin: 0 10px;">
                            <router-link :to="{name:'manager_add'}">
                                <Button type="primary" icon="plus">新增管理员</Button>
                            </router-link>
                        </span>
                    </Col>
                </Row>
                <br>
                <Row>
                    <div class="edittable-table-height-con">
                        <data-table :is-loading="isLoading" v-model="adminUsers" :columns-list="managerColumns"
                                    :total-record="total" :current-page="currentPage" @changePage="changePage">
                        </data-table>
                    </div>
                </Row>
            </Card>
        </Col>
      </Row>
  </div>

</template>

<script>
import dataTable from '../../my-components/data-table/dataTable.vue';
import managerData from './manager_col.js';

export default {
    name: 'manager-table',
    components: {
        dataTable
    },
    data () {
        return {
            isLoading: true,
            // 表头
            managerColumns: [
                {
                    title: '用户名',
                    key: 'username',
                    align: 'center'
                },
                {
                    title: '角色',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row;
                        return h('span', {}, row.role.roleName);
                    }
                },
                {
                    title: '邮箱',
                    align: 'center',
                    key: 'email'
                },
                {
                    title: '添加时间',
                    align: 'center',
                    key: 'createTime'
                },
                {
                    title: '状态',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row;
                        return h('i-switch',
                            {
                                style: {
                                    margin: '0 5px'
                                },
                                props: {
                                    value: row.status,
                                    size: 'large',
                                    trueValue: 1,
                                    falseValue: 2
                                },
                                on: {
                                    'on-change': (status) => {
                                        this.handleEnable(status, row);
                                    }
                                }
                            },
                            [
                                h('span', {
                                    slot: 'close'
                                }, '禁用'),
                                h('span', {
                                    slot: 'open'
                                }, '启用')
                            ]
                        );
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row;
                        let children = [];
                        if (this.$hasPerms('user:update')) {
                            children.push(
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon: 'edit',
                                        shape: 'circle'
                                    },
                                    style: {
                                        margin: '2px 5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleEdit(row);
                                        }
                                    }
                                }, '编辑')
                            );
                        }
                        // if (this.$hasPerms('user:delete')) {
                        //     children.push(
                        //         h('Poptip',
                        //             {
                        //                 props: {
                        //                     confirm: true,
                        //                     title: '您确定要删除吗?',
                        //                     transfer: true
                        //                 },
                        //                 on: {
                        //                     'on-ok': () => {
                        //                         this.handleDelete(row);
                        //                     }
                        //                 }
                        //             },
                        //             [
                        //                 h('Button', {
                        //                     props: {
                        //                         type: 'error',
                        //                         size: 'small',
                        //                         icon: 'trash-a',
                        //                         shape: 'circle'
                        //                     },
                        //                     style: {
                        //                         margin: '2px 5px'
                        //                     }
                        //                 }, '删除')
                        //             ])
                        //     );
                        // }
                        return h('div', children);
                    }
                }
            ],
            // 数据
            adminUsers: [],
            total: 0,
            currentPage: 1,
            permsSign: 'user',
            searchData: {
                username: null
            }
        };
    },
    methods: {
        getData () {
            this.isLoading = true;
            this.$get('/user/list?pageNum=' + this.currentPage, this.searchData)
                .then(res => {
                    this.adminUsers = res.records;
                    this.total = res.total;
                    this.currentPage = res.current;

                    this.isLoading = false;
                })
                .catch(error => {
                    this.isLoading = false;
                    this.$Message.error(error.message);
                });
        },
        handleEdit (val) {
            this.$router.push({
                name: 'manager_edit',
                params: {
                    id: val.id
                }
            });
        },
        handleDelete (val, index) {
            // 删除
            let userIds = [];
            userIds.push(val.id);
            this.$del('/user/delete', userIds, 'json')
                .then(res => {
                    this.adminUsers.splice(index, 1);
                    this.$Message.success('删除成功');
                }).catch(error => {
                    console.log(error);
                    this.$Message.error(error.message);
                });
        },
        handleEnable (status, rowVal) {
            // 启用、禁用
            this.$post('/user/enable',
                {
                    userId: rowVal.id,
                    status: status
                }
            )
                .then(res => {
                    if (status === 1) {
                        this.$Message.success('启用了' + rowVal.username);
                    } else {
                        this.$Message.warning('禁用了' + rowVal.username);
                    }
                    this.isLoading = false;
                })
                .catch(error => {
                    this.$Message.error(error.msg || error.message);
                    this.isLoading = false;
                });
        },
        changePage (page) {
            this.currentPage = page;
            this.getData();
        },
        handleSearch () {
            this.currentPage = 1;
            this.getData();
        }
    },
    created () {
        this.getData();
    }
};
</script>
